<script setup lang="ts">
import {ref} from "vue";
import type {RouteRecordRaw } from "vue-router";
import {  useRouter} from "vue-router";
import {NRadioButton, NRadioGroup, NSpace} from 'naive-ui'

const props = defineProps({
    buttons: {
        type: Array<RouteRecordRaw>,
        required: true,
    },
});
const value = ref("")
let router = useRouter();

</script>

<template lang="pug">
NRadioGroup(v-model:value="value")
    NRadioButton( v-for="song in buttons"
        :key="song.meta.title"
        :value="song.meta.title"
        @click="()=>{router.push(song.path)}")
        span {{ $t(song.meta.title) }}

</template>

<style scoped lang="scss">
.n-radio-button {
    font-size: 24px;
    color: #fff;
    font-family: 'Cinzel', serif;
    background: #0f0f0f;
    :hover {
        text-shadow: 0 0 14px rgba(255, 107, 55, 0.75), 0 0 14px rgba(255, 107, 55, 0.75), 0 0 14px rgba(255, 107, 55, 0.75), 0 0 14px rgba(255, 107, 55, 0.75), 0 0 14px rgba(255, 107, 55, 0.75);
    }

}
</style>